<template>
  <div id="url-upload">
    <a-input-search
      v-model:value="searchParams.fileUrl"
      placeholder="请输入url地址"
      enter-button="查找"
      size="large"
      :loading="loading"
      allow-clear
      @search="handleUpload"
    />
    <a-divider></a-divider>

    <a-row justify="center" style="align-items: center" v-if="picture?.url">
      <a-image :src="picture?.url" :alt="picture?.name" height="60vh"></a-image>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { uploadPictureByUrlUsingPost } from '@/api/pictureController.ts'

const loading = ref<boolean>(false)

interface Props {
  picture?: API.Picture
  onSuccess?: (pictureVO: API.PictureVO) => void
  spaceId?: number
}

const searchParams = ref<API.PictureUploadRequest>({})

const props = defineProps<Props>()

const handleUpload = async () => {
  loading.value = true
  try {
    if (props.picture) {
      searchParams.value.id = props.picture.id
    }
    const res = await uploadPictureByUrlUsingPost({
      ...searchParams.value,
      spaceId: props.spaceId,
    })
    if (res.data.code != 0) {
      return
    }
    props.onSuccess?.(res.data.data)
  } catch (error) {
    console.log(error.message)
  }
  loading.value = false
}
</script>
<style scoped lang="scss"></style>
